import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {
    Vector as VectorSource
} from 'ol/source';
import OSM from 'ol/source/OSM.js';
import {
    Tile as TileLayer,
    Vector as VectorLayer
} from 'ol/layer';
import {
    Circle as CircleStyle,
    Fill,
    Text,
    Stroke,
    Style,
    Icon,
    RegularShape
} from 'ol/style';
import {
    LineString,
    Polygon,
} from 'ol/geom';
import {
    ScaleLine,
    defaults as defaultControls,
} from 'ol/control';
import MousePosition from 'ol/control/MousePosition';
import XYZ from "ol/source/XYZ";
import {
    createStringXY
} from 'ol/coordinate';
import {
    Draw,
} from 'ol/interaction.js'

import { createSmoothLine } from './utils.js'
import Feature from 'ol/Feature.js';

let iMap;//一个实例对象
let featureLayer;
let featureSource;//临时绘制图像层
let _Draw;

//初始化ol实例
function Load_Map() {
    iMap = null;
    let map = document.getElementById('map');
    map.innerHTML = '';
    let layer = new TileLayer({
        source: new XYZ({
            url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            crossOrigin: 'anonymous',
        }),
    });
    featureSource = new VectorSource()
    featureLayer = new VectorLayer({
        source: featureSource,
    })
    layer.set('_type', 'vector');
    iMap = new Map({
        layers: [
            layer,
        ],
        target: 'map',
        view: new View({
            projection: 'EPSG:3857',
            center: [13223889.9284, 3769359.0668],
            maxZoom: 18,
            minZoom: 3,
            zoom: 13
        })
    })
}

//绘制线段
function createLine() {
    let _Style = [new Style({
        geometry: function (feature) {
            var geom = feature.getGeometry().getCoordinates();
            if (feature.getGeometry().getType() != 'Point') {
                if (geom.length > 2) {
                    if (geom.length == 3) {
                        if (geom[2].toString() == geom[1].toString()) {
                            return new LineString([geom[0], geom[1]])
                        } else {
                            return new LineString(createSmoothLine(geom))
                        }
                    } else {
                        return new LineString(createSmoothLine(geom))
                    }
                } else {
                    return new LineString(geom)
                }
            } else {
                return false
            }
        },
        stroke: new Stroke({
            width: 3,
            lineDash: [10, 10],
            color: 'red'
        })
    }),
    new Style({
        image: new CircleStyle({
            radius: 5,
            stroke: new Stroke({
                color: 'rgba(255, 255, 255, 0.7)',
            }),
            fill: new Fill({
                color: 'rgba(0, 153, 255, 1)',
            }),
        }),
    })]
    _Draw = new Draw({
        source: featureSource,
        type: 'LineString',
        geometryName: 'line',
        style: _Style
    })
    iMap.addInteraction(_Draw)
    _Draw.on('drawend', function (evt) {
        let coordiate = evt.feature.getGeometry().getCoordinates();
        let feature = new Feature({
            geometry: new LineString(coordiate),
        })
        feature.setStyle(
            _Style
        )
        createLayer(feature)
    })
}
//创建层
function createLayer(feature) {
    let source = new VectorSource();
    let layer = new VectorLayer({
        source: source
    })
    iMap.addLayer(layer);
    source.addFeature(feature);
}


function scaleControl() {
    var control = new ScaleLine({
        units: 'metric',
    });
    return control;
}
export default {
    Load_Map,
    createLine
}